<template>
  <div
    class="facecompare-card-wrapper d-flex flex-column ai-center jc-start"
    @click="handleSelect"
    :class="cardData.isSelect ? 'active' : ''"
  >
    <div class="img-box d-flex jc-center ai-center">
      <MyImage :src="cardData.img_path" alt />
    </div>
    <div v-if="cardData.lib_id !== MOSHENGREN_ID" class="text-wrapper d-flex flex-column jc-start ai-start pl-20">
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.name') }}:{{cardData.name}}</div>
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.lib_name') }}:{{cardData.lib_name}}</div>
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.similarity') }}:{{cardData.similarity}}</div>
    </div>
    <div v-else class="text-wrapper  pl-20">
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.similarity') }}:{{cardData.similarity}}</div>
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.channelNo') }}:{{cardData.wanderdeviceid}}</div>
      <div class="info mt-10 mb-10">{{ $t('renlianbidui.wandertrigger') }}:{{cardData.wandertrigger}}</div>
    </div>
    <StaffDetail :visible.sync="staffDetailVisible" :row="cardData" />
  </div>
</template>

<script>
import { MOSHENGREN_ID } from "@/utils/CONSTANT";
import StaffDetail from "./StaffDetail.vue";
import MyImage from "@/components/Image";
export default {
  components: { StaffDetail, MyImage },
  props: {
    cardData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      MOSHENGREN_ID,
      staffDetailVisible: false
    };
  },
  methods: {
    handleSelect() {
      this.staffDetailVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.facecompare-card-wrapper  {
  width: 160px;
  transition: all 0.1s;
  cursor: pointer;
  &:hover {
    scale: 1.2;
    background: #ececec;
  }
  .img-box {
    background-color: rgba(242, 250, 255, 1);
    border-radius: 8px;
    height: 250px;
    border: 1px solid rgba(230, 237, 242, 1);
    width: 160px;
  }
  .text-wrapper {
    width:160px;
  }  
}
</style>
